<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        GET  
        偏向获取的语义化
        参数是查询字符串
        大小有限制 2KB 左右
        参数位置在地址后面

        POST 
        偏向提交的语义化
        参数格式多样，但是需要特殊说明
        理论上没有限制
        参数位置在请求体内
     -->
     <script>
        // 1.GET 请求
        // var xhr = new XMLHttpRequest()
        // // 需要携带参数
        // // 因为是 GET 请求，直接在地址后面进行参数的书写
        // xhr.open('GET','http://localhost:8888/test/third?name=前端小灰狼&age=18',true)
        // xhr.onlaod = function(){
        //     console.log(JSON.parse(xhr.responseText))
        // }
        // xhr.send()


        // 2.POST 请求
        var xhr = new XMLHttpRequest()
        // 注意：因为是POST 请求，不需要在地址后面拼接参数
        xhr.open('POST','http://localhost:8888/test/fourth',true)
        xhr.onload = function(){
            console.log(JSON.parse(xhr.responseText))
        }

        // 注意：当你发送 POST 请求，并且需要携带参数的时候，需要进行特殊说明
        // 语法：xhr.setRequestHeader('content-type',你传递参数的格式)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

        // send 后面的（）就是书写请求体的位置
        xhr.send('name=能能酱酱&age=18')
     </script>
</body>
</html>